<template>
  <view class="container">
    <!-- 顶部标题和时间选择 -->
    <view class="header">
      <view class="title-container">
        <text class="title">跑操出勤管理系统</text>
        <text class="subtitle">每日跑操记录</text>
      </view>
      
      <view class="time-selector">
        <view 
          :class="['time-tab', activeTime === 'morning' ? 'active' : '']"
          @click="changeTime('morning')"
        >
          <image 
            :src="activeTime === 'morning' ? '/static/sun-active.png' : '/static/sun.png'" 
            class="time-icon"
          />
          <text>上午跑操</text>
        </view>
        <view 
          :class="['time-tab', activeTime === 'afternoon' ? 'active' : '']"
          @click="changeTime('afternoon')"
        >
          <image 
            :src="activeTime === 'afternoon' ? '/static/moon-active.png' : '/static/moon.png'" 
            class="time-icon"
          />
          <text>下午跑操</text>
        </view>
      </view>
    </view>
    
    <!-- 日期显示 -->
    <view class="date-display">
      <image src="/static/calendar.png" class="calendar-icon"></image>
      <text>{{ currentDate }}</text>
    </view>
    
    <!-- 年级班级选择 -->
    <view class="selection-container">
      <!-- 年级选择 -->
      <view class="section-title">
        <image src="/static/grade-icon.png" class="section-icon"></image>
        <text>选择年级</text>
      </view>
      <view class="grade-list">
        <view 
          v-for="grade in grades" 
          :key="grade.value"
          :class="['grade-card', activeGrade === grade.value ? 'active' : '']"
          @click="selectGrade(grade.value)"
        >
          <view class="grade-badge">{{ grade.label }}</view>
          <image 
            :src="activeGrade === grade.value ? '/static/arrow-right-active.png' : '/static/arrow-right.png'" 
            class="arrow-icon"
          />
        </view>
      </view>
      
      <!-- 班级选择 -->
      <view class="section-title" v-if="activeGrade">
        <image src="/static/class-icon.png" class="section-icon"></image>
        <text>选择班级</text>
      </view>
      <view class="class-grid" v-if="activeGrade">
        <view 
          v-for="n in 10" 
          :key="n"
          class="class-card"
          @click="selectClass(n)"
        >
          <view class="class-number">{{ n }}</view>
          <text class="class-name">{{ gradeName }}({{ n }})班</text>
        </view>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="footer-wave">
      <image src="/static/wave.png" class="wave-image"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: this.formatDate(new Date()),
      activeTime: 'morning',
      activeGrade: '',
      grades: [
        { label: '初一', value: 'grade1' },
        { label: '初二', value: 'grade2' },
        { label: '初三', value: 'grade3' }
      ]
    }
  },
  computed: {
    gradeName() {
      const gradeMap = {
        'grade1': '初一',
        'grade2': '初二',
        'grade3': '初三'
      }
      return gradeMap[this.activeGrade] || ''
    }
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const week = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]
      return `${year}年${month}月${day}日 星期${week}`
    },
    changeTime(time) {
      this.activeTime = time
    },
    selectGrade(grade) {
      this.activeGrade = grade
    },
    selectClass(classNum) {
      uni.navigateTo({
        url: `/pages/attendance/attendance2?grade=${this.activeGrade}&class=${classNum}&time=${this.activeTime}`
      })
    }
  }
}
</script>

<style>
/* 基础样式 */
.container {
  padding: 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  position: relative;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.title-container {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 42rpx;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}

/* 时间选择器 */
.time-selector {
  display: flex;
  background-color: #f0f7ff;
  border-radius: 50rpx;
  overflow: hidden;
  border: 2rpx solid #1890ff;
}

.time-tab {
  padding: 12rpx 25rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #1890ff;
  background-color: transparent;
}

.time-tab.active {
  background-color: #1890ff;
  color: #fff;
}

.time-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

/* 日期显示 */
.date-display {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 25rpx;
  border-radius: 15rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.calendar-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
}

/* 选择容器 */
.selection-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.section-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 15rpx;
}

/* 年级卡片 */
.grade-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.grade-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 15rpx;
  border: 2rpx solid #eee;
  transition: all 0.3s;
}

.grade-card.active {
  background-color: #f0f7ff;
  border-color: #1890ff;
}

.grade-badge {
  background-color: #1890ff;
  color: #fff;
  padding: 8rpx 25rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.arrow-icon {
  width: 36rpx;
  height: 36rpx;
}

/* 班级网格 */
.class-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20rpx;
}

.class-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.class-number {
  width: 70rpx;
  height: 70rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.class-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

/* 底部波浪装饰 */
.footer-wave {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  z-index: -1;
}

.wave-image {
  width: 100%;
  height: 100%;
}
</style>